<script setup>
import { 
  onBeforeMount, 
  onMounted, 
  onBeforeUpdate, 
  onUpdated,
  onBeforeUnmount, 
  onUnmounted,
  ref
} from 'vue';

const name = 'litchi-component';
console.log( `${name} - setup` );
console.log( this );

onBeforeMount( () => {
  console.log(`${name}: before mount`);
  console.log( this );
});

onMounted( () => {
  console.log(`${name}: mounted`);
  console.log( this );
});

onBeforeUpdate( () => {
  console.log(`${name}: before update`);
  console.log( this );
});

onUpdated( () => {
  console.log(`${name}: updated`);
  console.log( this );
});

onBeforeUnmount( () => {
  console.log(`${name}: before unmount`);
  console.log( this );
});

onUnmounted( () => {
  console.log(`${name}: before unmounted`);
  console.log( this );
});

const price = ref(0);

</script>

<template>
  <div>
    <h4>Litchi : 荔枝</h4>
    <input type="number" v-model="price">
    <p>{{price}}</p>
  </div>
</template>